<template>
<div class="main-container">

      <div v-if="isModalOpen" class="modal-overlay">
      <div class="modal" @click.stop>
        <div class="modal-header">
          <div class="modal-first">
            <button class="modal-button-close" @click="closeModal">❌</button>
          </div>
          <div class="modal-second">
            <button class="modal-button" @click="sendToAITranslate">AI翻译</button>
            <button class="modal-button" @click="sendToAISentence">Ai例句</button>
            <button class="modal-button" @click="sendToAIStory">AI故事</button>
          </div>
        </div>
        <div class="modal-body">
          <p>{{ aiResponse }}</p>
        </div>
      </div>
    </div>


<div 
    class="floating-toolbar"
    :style="toolbarStyle"
    ref="toolbarRef"
  >
    <div class="toolbar-content">
      <button class="toolbar-btn" @click="handleClean">
        <span class="icon">🗑️</span>
        <span class="text">清除聊天</span>
      </button>
      <button class="toolbar-btn" @click="handleSave" v-if="!isPortrait">
        <span class="icon">💾</span>
        <span class="text">保存到本地</span>
      </button>
      <button
      v-if="isPortrait"
      class="toolbar-btn"
      @click="toggleChat"
    >
      {{ isChatVisible ? '💤隐藏聊天' : '👁‍🗨️显示聊天' }}
    </button>
      
      <div class="divider"></div>
      <button class="toolbar-btn" @click="toggleFullscreen">
        <span class="icon">{{ isFullscreen ? '📱' : '🖥️' }}</span>
        <span class="text">{{ isFullscreen ? '退出' : '全屏' }}</span>
      </button>
    </div>
    </div>
    <div class="chat-messages" ref="chatMessagesContainer" :style="chatStyle" @mouseup="handleMouseUp">
      <div
        v-for="(msg, index) in chatMessages"
        :key="index"
        class="message"
        :class="msg.role"
        @mouseover="showDeleteButton(index)"
        @mouseout="hideDeleteButton"
      >
        <div class="message-content">{{ msg.content }}</div>
        <!-- 删除按钮，使用 v-show 控制显示状态 -->
        <button
          v-show="activeIndex === index"
          class="delete-button"
          @click.stop="deleteMessage(index)"
        >
          🗑️
        </button>
      </div>
    </div>
  <div class="chat-input-container">
    <div class="chat-input">
      <input v-model="userInput" 
          @keyup.enter="sendMessage"
          placeholder="输入..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>

    <div class="live2d-container">
      <canvas ref="liveCanvas"></canvas>
      <div class="speech-bubble" v-if="(isPortrait && !isChatVisible) || !isPortrait">
        <p>{{ message }}</p>
      </div>
  </div>
    </div>
</template>
 
<script setup>
import {ref,onMounted,nextTick,watch,onUnmounted,computed} from  "vue";
import config from '@/config';
import axios from 'axios';
const username = localStorage.getItem('username');
//此处为模型配置
const close_eye="close_eye";//闭眼表情的命名。需要和在live2d中一致
const open_eye="open_eye";
const start="hs";//初始化动作
const modelpath = './model/hiyori/hiyori_free_t08.model3.json';//模型目录

import {onBeforeUnmount} from  "vue";
import * as PIXI from "pixi.js"
import { Live2DModel } from "pixi-live2d-display/cubism4";
window.PIXI =PIXI
let app;
let model;
const liveCanvas=ref(null);
let eyeInterval;
let mouthInterval;
let autoBlink = true;

function controlBlinking() {
    const blinkDuration = 600; // 眨眼持续时间

    function blink() {
      if (autoBlink==false) return; // 如果在说话时不进行眨眼

      model.expression(close_eye); // 闭上眼睛
      setTimeout(() => {
        model.expression(open_eye); // 打开眼睛
      }, blinkDuration); // 闭眼后 300ms 再打开眼睛
    }
    const randomBlinkInterval = Math.floor(Math.random() * (6000 - 3000 + 1)) + 3000;
    // 设置定时器周期性眨眼
    eyeInterval = setInterval(blink, randomBlinkInterval);
  }


onMounted(async ()=>{
  app=new PIXI.Application({
    view:liveCanvas.value || undefined,
    autoStart:true,
    resizeTo:window,
    backgroundAlpha:0
  })
  model = Live2DModel.fromSync(modelpath, { onError: console.warn });

  model.once('load', () => {
    model.anchor.set(0, -0.3);
    app.stage.addChild(model);
    model.scale.set(0.16);
    model.expression(start); // 设置初始表情
    controlBlinking(); // 启动眨眼逻辑
});


});
onBeforeUnmount(()=>{
  clearInterval(eyeInterval);
  clearInterval(mouthInterval);
  model?.destroy();
  app?.destroy()
})

//-------------------------------------
//人物头上气泡框
//-------------------------------------
const message = ref(''); // 用于存储人物对话内容

// 示例：更新对话内容的方法
function updateMessage(newMessage) {
  message.value = newMessage;
}
updateMessage("Hello,I'm Hiyori.");
//-------------------------------------
//聊天相关
//-------------------------------------
const chatMessages = ref([])
const userInput = ref('')
const isLoading2 = ref(false)

watch(chatMessages, (newValue) => {
  axios.post(config.apiUrl + 'save-chat-messages.php', {
    username: username,
    chatMessages: newValue
  }, {
      headers: {
        'Content-Type': 'application/json'
    }
      })
  .catch(error => {
    console.error('保存失败:', error);
  });
}, { deep: true });

// 从服务器加载数据
onMounted(() => {
  axios.post(config.apiUrl + 'load-chat-messages.php', {
    username: username
  }, {
      headers: {
        'Content-Type': 'application/json'
    }
      })
  .then(response => {
    if (response.data && response.data.chatMessages) {
      chatMessages.value = response.data.chatMessages;
      scrollToBottom();
    }
  })
  .catch(error => {
    console.error('加载失败:', error);
  });
});
//清除
const handleClean = () => {
  chatMessages.value=[];
}
//发送
const sendMessage = async () => {
  if (!userInput.value.trim() || isLoading2.value) return

  chatMessages.value.push({ 
    role: 'user', 
    content: userInput.value 
  })
  scrollToBottom();
  userInput.value = ''
  isLoading2.value = true

  try {
    const response = await fetchOpenAI()
    console.log(response)
    const generatedReply = response.code
    chatMessages.value.push({
      role: 'assistant',
      content: generatedReply
    })
    scrollToBottom();
    updateMessage(generatedReply);
  } catch (error) {
    console.log(error.message);
  } finally {
    isLoading2.value = false
  }
}

// 定义容器的引用
const chatMessagesContainer = ref(null);

// 方法：滚动到容器底部
const scrollToBottom = () => {
  if (chatMessagesContainer.value) {
    nextTick(() => { // 确保 DOM 更新完成
      chatMessagesContainer.value.scrollTop = chatMessagesContainer.value.scrollHeight;
    });
  }
};
//-------------------------------------
//竖屏聊天框的隐藏
//-------------------------------------
const isChatVisible = ref(true); // 控制聊天框的显示状态
const isPortrait = ref(false); // 是否为竖屏模式

// 动态样式
const chatStyle = computed(() => {
  return {
    display: isChatVisible.value ? 'block' : 'none'
  };
});

// 切换聊天框的显示状态
const toggleChat = () => {
  isChatVisible.value = !isChatVisible.value;
};

// 检测屏幕方向
const checkOrientation = () => {
  const isPortraitMode = window.matchMedia('(orientation: portrait)').matches;
  isPortrait.value = isPortraitMode;

  // 如果切换到横屏模式，自动显示聊天框
  if (!isPortraitMode) {
    isChatVisible.value = true;
  }
};

// 挂载时检测屏幕方向
onMounted(() => {
  checkOrientation();
  window.addEventListener('resize', checkOrientation);
});

// 卸载时移除监听器
onUnmounted(() => {
  window.removeEventListener('resize',checkOrientation);
});
//-------------------------------------
//消息记录管理
//-------------------------------------

const activeIndex = ref(null); // 当前显示删除按钮的消息索引
const hideTimeout = ref(null); // 用于延迟隐藏的定时器
const lastDeletedMessage = ref(null); // 保存被删除的消息
const lastDeletedIndex = ref(null); // 保存被删除的消息索引
// 显示删除按钮
const showDeleteButton = (index) => {
  activeIndex.value = index;
  clearTimeout(hideTimeout.value); // 清除之前的隐藏定时器
};

// 隐藏删除按钮
const hideDeleteButton = () => {
  clearTimeout(hideTimeout.value); // 清除之前的定时器
  hideTimeout.value = setTimeout(() => {
    activeIndex.value = null;
  }, 300); // 延迟 300ms 隐藏删除按钮
};

// 删除消息
const deleteMessage = (index) => {
  lastDeletedMessage.value = chatMessages.value[index]; // 保存被删除的消息
  lastDeletedIndex.value = index; // 保存被删除的消息索引
  chatMessages.value.splice(index, 1); // 删除消息
  activeIndex.value = null; // 删除后隐藏删除按钮
};

// 撤销删除
const undoDelete = () => {
  if (lastDeletedMessage.value !== null && lastDeletedIndex.value !== null) {
    chatMessages.value.splice(lastDeletedIndex.value, 0, lastDeletedMessage.value);
    lastDeletedMessage.value = null; // 清空保存的消息
    lastDeletedIndex.value = null; // 清空保存的索引
  }
};

// 监听键盘事件
const handleKeydown = (event) => {
  if (event.ctrlKey && event.key === 'z') { // 检测 Ctrl + Z
    event.preventDefault(); // 防止默认行为
    undoDelete(); // 撤销删除
  }
};

// 挂载时添加键盘监听
onMounted(() => {
  window.addEventListener('keydown', handleKeydown);
});

// 卸载时移除键盘监听
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown);
});
//-------------------------------------
//openai接口
//-------------------------------------
// 发送请求到 OpenAI，并获取代码
const fetchOpenAI = async () => {
  const latestMessages = chatMessages.value.slice(-100);
  const systemMessage = { role: 'system', content: `你是一个英语对话助手，引导用户练习硕士研究生英语考试，回复用户英文内容，如何用户有语法错误，则纠正。请使用简短的句子回复，尽量不超过三句话，像日常聊天一样，回复纯文本内容` };
  const chatHistory = [systemMessage, ...latestMessages];
  try {
    // 发送请求到后端 (PHP)
    console.log(chatHistory);
    const response = await axios.post(config.apiUrl + 'openai_proxy.php', {
      messages: chatHistory // 发送聊天记录
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 处理并返回 OpenAI 响应
    const { choices } = response.data;
    const code = choices && choices[0] ? choices[0].message.content : '';

    // 返回生成的代码和完整的 OpenAI 响应
    return {
      code, // 返回生成的代码
      rawResponse: response.data, // 返回完整的 OpenAI API 响应
    };

  } catch (error) {
    console.error('API调用失败:', error);
    throw new Error(`生成失败: ${error.message}`);
  }
};
//-------------------------------------
//工具栏
//-------------------------------------
const isFullscreen = ref(false)

const handleSave = () => {
  console.log('保存操作')
  // 触发保存逻辑
}

const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}
/* ############################## */
/* ai交互类 */
/* ############################## */



//openai接口
// 发送请求到 OpenAI，并获取代码
const fetchOpenAILite = async (vocabulary,userOption) => {
  const systemMessage = { role: 'system', content: `你是一个英语对话助手，帮助，用户解释单词或句子，回复纯文本内容,简要回答，尽量不超过3句话` };
  const aimessage = [systemMessage];
  aimessage.push({
      role: 'user',
      content: userOption+vocabulary
    })
  try {
    const response = await axios.post(config.apiUrl + 'openai_proxy.php', {
      messages: aimessage // 发送聊天记录
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 处理并返回 OpenAI 响应
    const { choices } = response.data;
    const code = choices && choices[0] ? choices[0].message.content : '';

    // 返回生成的代码和完整的 OpenAI 响应
    return {
      code, // 返回生成的代码
      rawResponse: response.data, // 返回完整的 OpenAI API 响应
    };

  } catch (error) {
    console.error('API调用失败:', error);
    throw new Error(`生成失败: ${error.message}`);
  }
};


const selectedText = ref('');
const aiResponse = ref('');
const isModalOpen = ref(false);
const isUsingAi = ref(false);
// 捕获用户选择的文本
const handleMouseUp = () => {
  const selection = window.getSelection().toString().trim();
  if (selection) {
    selectedText.value = selection;
    isModalOpen.value = true;
    aiResponse.value = selectedText.value;
  }
};

// 发送到 AI 并接收响应
const sendToAITranslate = async () => {
  isUsingAi.value=true;
  try {
    const response = await  fetchOpenAILite(selectedText.value,"给出以下英语句子或单词的翻译：");
    console.log(response)
    aiResponse.value = response.code
    isUsingAi.value=false;
  } catch (error) {
    console.log(error.message);
    isUsingAi.value=false;
  }
};
const sendToAISentence = async () => {
  isUsingAi.value=true;
  try {
    const response = await  fetchOpenAILite(selectedText.value,"给出以下英语句子或单词的例句，还包含中文翻译：");
    console.log(response)
    aiResponse.value = response.code
    isUsingAi.value=false;
  } catch (error) {
    console.log(error.message);
    isUsingAi.value=false;
  }
};
const sendToAIStory = async () => {
  isUsingAi.value=true;
  try {
    const response = await  fetchOpenAILite(selectedText.value,"根据以下英语句子或单词，写一段小故事，不超过50词：");
    console.log(response)
    aiResponse.value = response.code
    isUsingAi.value=false;
  } catch (error) {
    console.log(error.message);
    isUsingAi.value=false;
  }
};


const closeModal = () => {
  if(isUsingAi.value==false)
  {
    isModalOpen.value = false;
    aiResponse.value = '';
  }
};


</script>
 
<style scoped>

/* ############################## */
/* 主容器 */
/* ############################## */

.main-container{
  height:100vh;
  background: linear-gradient(
    135deg,
    #f5f7fa 0%,     /* 柔和的云朵白 */
    #e3e9ff 25%,    /* 浅薰衣草灰 */
    #d8e4ff 50%,    /* 极淡的婴儿蓝 */
    #eceffd 75%,    /* 细腻的月光银 */
    #f5f7fa 100%    /* 与起始颜色呼应形成无缝循环 */
  );
  background-size: 100% 100%; /* 更紧凑的背景尺寸提升细腻度 */
  animation: gradient 5s ease infinite; /* 更缓和的动画节奏 */
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ############################## */
/* 工具栏 */
/* ############################## */
.floating-toolbar {
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(093, 116, 162, 0.2);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.toolbar-content {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
    white-space: nowrap; /* 禁用自动换行 */
  flex-wrap: nowrap;   /* 禁用flex换行 */
}

.toolbar-btn {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #1c1c1e;
  font-size: 14px;
  font-weight: 500;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.toolbar-btn:active {
  transform: translateY(1px);
}

.icon {
  margin-right: 8px;
  font-size: 16px;
}

.divider {
  width: 1px;
  height: 24px;
  background: rgba(60, 60, 67, 0.18);
  margin: 0 8px;
}


/* ############################## */
/* 聊天框样式表 */
/* ############################## */
.chat-messages {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  height: 70vh;
  overflow-y: auto;
  padding: 10px;
  background: rgba(245, 245, 245, 0.5); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border-radius: 16px; /* 圆角效果 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  box-sizing: border-box;
  z-index: 1000;
}
/* 滚动条美化（iOS 风格） */
.chat-messages::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景透明 */
  border-radius: 10px; /* 与容器的圆角边框一致 */
  margin: 10px 0;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* 滚动条颜色 */
  border-radius: 10px; /* 滚动条圆角与容器一致 */
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4); /* 滚动条悬停时的颜色 */
}
.message {
  margin: 10px 0;
  padding: 8px;
  border-radius: 16px; /* 增大圆角以符合 iOS 风格 */
  max-width: 60%; /* 限制消息宽度 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  font-size: 14px; /* 使用较小的字体大小 */
  line-height: 1.4; /* 调整行高 */
  position: relative;
  display: block;
  width: fit-content;
}

.message.user {
  background: #e3f2fd; /* 用户消息背景色 */
  margin-left: auto; /* 使用 flexbox 右对齐 */
  margin-right: 20px; /* 右边距 */
  color: #333; /* 文字颜色 */
  text-align: left;
  padding-left: 30px;
  padding-right: 30px;
}

.message.assistant {
  background: #fff; /* 助手消息背景色 */
  margin-left: 20px; /* 左边距 */
  margin-right: auto; /* 使用 flexbox 左对齐 */
  color: #666; /* 文字颜色 */
  text-align: left;
  padding-right: 20px;
  padding-left: 20px;
}
.delete-button {
  background: none;
  border: none;
  color: red;
  cursor: pointer;
  font-size: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.message.user .delete-button {
  left: 0; /* 用户消息的删除按钮在左边 */
}

.message.assistant .delete-button {
  right: 0; /* 助手消息的删除按钮在右边 */
}


/* 添加箭头效果 */
.message.user::before {
  content: '';
  position: absolute;
  top: 10px;
  right: -8px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left-color: #e3f2fd;
}

.message.assistant::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -8px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #fff;
}

/* ############################## */
/* live2d模型和头顶气泡框 */
/* ############################## */
.live2d-container {
  position: relative;
}
.speech-bubble {
  position: fixed;
  left: 6vw; /* 气泡框的水平位置 */
  top: 15vh; /* 气泡框的垂直位置 */
  background-color: rgba(255, 255, 255, 0.7); /* 背景颜色 */
  backdrop-filter: blur(10px); /* 毛玻璃模糊效果 */
  border: 1px solid #e5e5e5; /* 边框颜色 */
  border-radius: 16px; /* 增大圆角 */
  padding: 12px; /* 增加内边距 */
  max-width: 20vw; /* 最大宽度 */
  text-align: center; /* 文字居中 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
  z-index: 1000; /* 确保气泡框显示在其他元素之上 */
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border-left: 10px solid transparent;
  border-top: 10px solid #ffffff;
}

/* ############################## */
/* 用户输入 */
/* ############################## */

.chat-input-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  z-index:1000;
}

.chat-input {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(245, 245, 245, 0.5); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 毛玻璃模糊效果 */
  border-radius: 20px; /* 更圆润的边角 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  border: 1px solid rgba(0, 0, 0, 0.05); /* 淡雅的边框 */
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1); /* 淡雅的输入框边框 */
  border-radius: 10px; /* 圆润的输入框边角 */
  background-color: rgba(255, 255, 255, 0.2); /* 输入框背景 */
  color: #333; /* 输入文字颜色 */
  font-size: 14px; /* 字体大小 */
  outline: none; /* 去掉焦点时的边框 */
  transition: width 0.5s ease; /* 平滑过渡效果 */
  width:8vw;
}
.chat-input input:focus {
  width: 25vw; /* 聚焦时变宽 */
  padding: 10px 20px; /* 可选：调整内边距 */
  
}
.chat-input input::placeholder {
  color: #aaa; /* 输入框占位符颜色 */
}

.chat-input button {
  padding: 14px 30px; /* 增加内边距，使按钮更饱满 */
  border: none;
  background: linear-gradient(135deg, #e3f2fd, #d1e8ff); 
  color: black;
  border-radius: 20px; /* 适中的圆角设计 */
  cursor: pointer;
  font-size: 14px; /* 字体大小 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* 背景颜色和点击效果的过渡 */
  font-weight: 500; /* 字体稍显粗体，更清晰 */
  box-shadow: none; /* 移除阴影 */
}

.chat-input button:hover {
  background: linear-gradient(135deg, #d1e8ff, #e3f2fd); /* 悬停时渐变反转 */
  box-shadow: 0 6px 20px rgba(106, 17, 203, 0.3); /* 更显眼的阴影 */
  transform: translateY(-1px); /* 悬停时的轻微上浮效果 */
}

.chat-input button:active {
  transform: translateY(1px); /* 按钮点击时轻微下沉效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 细致的阴影 */
  background: linear-gradient(135deg, #d1e8ff, #e3f2fd); /* 点击时保持反转渐变 */
}


/* ############################## */
/* 竖屏响应 */
/* ############################## */
@media (orientation: portrait) {
  .chat-input-container {
    justify-content: center; /* 竖屏时水平居中 */
    bottom: 8vh;
  }
  .speech-bubble {
  left:5vw;
  top: 15vh; /* 根据模型头部位置调整 */
  max-width: 80vw;
  }
  .chat-messages {
    width: 85vw; /* 竖屏时宽度更宽 */
    height: 60vh; /* 竖屏时高度更高 */
    padding: 15px; /* 增加内边距 */
    font-size: 14px; /* 调整字体大小以适应竖屏 */
    transform: translate(-50%, -55%);
  }
  .chat-input {
    width:80vw;
  }
  .chat-input input{
    width:70vw;
  }
  .chat-input input:focus {
  width:70vw;
  padding: 10px;
  }
  .divider{
    display:none;
  }
  .toolbar-content {
  gap: 8px;
  }
  .live2d-container {
  
}
}



/* ############################## */
/* ai模态窗 */
/* ############################## */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1001;
}

.modal {
  position: relative;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
  padding: 20px;
  border-radius: 16px;
  width: 20vw;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1001;
}

.modal-header {
  display: block; /* 或者不使用 flex */
  margin-bottom: 40px;
  position: relative;
}

.modal-first {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px; /* 添加间距 */
  height:20px;
}

.modal-second {
  display: flex;
  gap: 10px;
}

.modal-button {
  padding: 10px 15px; /* 内边距 */
  border: none; /* 移除边框 */
  border-radius: 20px; /* 圆角 */
  background-color: #87CEEB; /* 淡雅的浅蓝色 */
  color: white; /* 文字颜色 */
  cursor: pointer; /* 鼠标指针样式 */
  font-size: 14px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  outline: none; /* 移除默认的焦点轮廓 */
}

/* 悬停效果 */
.modal-button:hover {
  background-color: #77B5E7; /* 悬停时更深的浅蓝色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 增加阴影 */
  transform: translateY(-2px); /* 微微上移 */
}

/* 按下效果 */
.modal-button:active {
  background-color: #66A3D2; /* 按下时更深的浅蓝色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 减少阴影 */
  transform: translateY(0); /* 恢复位置 */
}

/* 焦点状态 */
.modal-button:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5); /* 焦点时的轮廓 */
  outline-offset: 2px; /* 轮廓偏移 */
}

.modal-button:hover {
  background-color: #0062cc;
}

.modal-button-close {
  border: none; /* 移除边框 */
  font-size: 16px; /* 设置字体大小 */
  top: 0; /* 定位到顶部 */
  right: 0; /* 定位到右侧 */
  background: none; /* 移除背景 */
  cursor: pointer; /* 添加鼠标指针样式，表示可点击 */
  padding: 5px; /* 添加一些内边距，便于点击 */
}

.modal-body {
  font-size: 16px;
  color: #333;
  text-align: center;
}
</style>